<template>
	<view class="wrapper">
		<view class="top">
			<textarea class="text-area" v-model="text" @keyup="checkText()" placeholder="想说点啥腻" maxlength="200">
				
			</textarea>
		</view>
		<view class="middle">
			<view class="images">
				<image class="image" @longpress="removeImage(index)" v-for="(url,index) in selected_images" :key="index" :src="url"></image>
				<image class="image" @tap="addImage()" v-show="selected_images.length<6" src="../../../../static/icon/add-image.jpg"></image>
			</view>
		</view>
		<view class="bottom">
		<!-- 	<button class="btn blue">存为草稿</button> -->
			<button class="btn" @tap="deliver()">发布</button>
		</view>
	</view>
</template>

<script>
	import dateUtil from 'util/date';
	import URL from '@/api/url.js';
	import {mapGetters} from 'vuex';
	import {postBlog} from'@/api/user.js';
	export default {
		data() {
			return {
				text:'',
				selected_images:[],
				upload_images:'',
				hasUploaded:false,//有没有上传
				
			}
		},
		computed:{
			...mapGetters(['token','user'])
		},
		methods: {
			 uploadImage(){
				let that = this;
				// 开始上传图片
				let len = this.selected_images.length;
				for(let i=0;i<len;i++){
					uni.showLoading({
						title:'正在上传图片'+(i+1)+'/'+len
					})
				    uni.uploadFile({
							 url: URL.getImageUrl()+'/upload',
						     filePath: that.selected_images[i],
						     name: 'image',
						     formData: {
								 password:URL.getImagePassword(),
						         image: that.selected_images[i]
						     },
						     success: response => {
						         let res = JSON.parse(response.data);
						         if (res.code == 200) {
									 that.upload_images += URL.getImageUrl()+'/images/'+res.content.url+',';	
							
									//如果是最后一张照片就可以
									if(i+1===len){
										that.hasUploaded = true;
										uni.showLoading({
											title:'正在发布'
										})
										setTimeout(()=>{
											that.deliver();
										},1000);
									}
														 
						         }else{
									 uni.hideLoading();
									 uni.showToast({
									 	title:res.message,
										icon:'error'
									 })
									 return;
								 }
						     },
						     fail: err => {
								 uni.hideLoading();
						         uni.showToast({
						         	title:'图片上传失败~',
									icon:'error',
									duration:1000
						         });
								 return;
						     }
						});
					
					uni.hideLoading();
				}
			},
			async deliver(){
				if(this.selected_images.length!=0 && this.hasUploaded===false){
					await this.uploadImage();
				}
				else{
					if(this.selected_images.length===0&&this.text.length<5){
						uni.showToast({
							title:'内容太少啦~',
							icon:'none'
						})
						return;
					}
					const { content: res } = await postBlog({
						token:this.token,
						content:this.text,
						images:this.upload_images,
						time:dateUtil.getTimeNow()
					});
					uni.hideLoading();
					uni.showToast({
						title:res,
						icon:'success',
						duration:800
					})
					setTimeout(()=>{
						uni.navigateBack({
							animationType:'slide-out-left'
						})
					},800)
				}
			},
			checkText(){
				// #ifdef H5
				this.text = this.text.replaceAll('  ',' ');
				// #endif
				//#ifdef APP-PLUS
				this.text = this.text.replace('  ',' ');
				//#endif
				if(this.text.length>200){
					uni.showToast({
						title:'最多200个字哦~',
						icon:'none'
					})
					this.text = this.text.substring(0,200);
				}
			},
			addImage(){
				let that = this;
				uni.chooseImage({
					count: 6 - that.selected_images.length,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						for(let i=0;i<res.tempFilePaths.length;i++){
							that.selected_images.push(res.tempFilePaths[i]);
						}
					}
				});
			},
			removeImage(index){
				let that = this;
				uni.showModal({
					title:'提示',
					content:'删除此照片？',
					confirmText:'确定',
					confirmColor:'#D94B4D',
					cancelText:'取消',
					success: (res) => {
						if(res.confirm){
							that.selected_images.splice(index,1);
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
	.image{
		border-radius: 10rpx;
		width: 200rpx;
		height: 200rpx;
	}
	.images{
		margin-left: 20rpx;
		margin-right: 20rpx;
		display: grid;
		grid: 210rpx / auto auto auto;
	}
	.text-area{
		padding: 5rpx;
		font-family: Arial, Helvetica, sans-serif;
		border-radius: 10rpx;
		width: 95%;
		height: 300rpx;
		background-color: "#787878";
		margin: 20rpx;
	}
	.blue{
		background-color: cornflowerblue !important;
	}
	.bottom{
		padding-top: 100rpx;
	    text-align: center;
	    line-height: 200rpx;	
	}
	.btn{	
		margin-top: 50rpx;
		background-color: #4CD964;
		color: white;
		margin: 20rpx;
		border-radius: 15rpx;
	}
	.wrapper{
		background-color: white;
	}
</style>
